<template>
  <div class="change-log-container">
    <BasicTable
      ref="tableRef"
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
      :pagination="pagination"
      :bordered="true"
      :size="'small'"
      @register="registerTable"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, watch } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getChangeLogList } from '../GoodsSearch.api'; // 假设有一个获取变更日志的API

  const props = defineProps({
    isUpdate: {
      type: Boolean,
      default: false,
    },
    record: {
      type: Object,
      default: () => ({}),
    },
  });

  const emit = defineEmits(['register', 'handleOk', 'error']);

  // 表格引用
  const tableRef = ref(null);

  // 加载状态
  const loading = ref(false);

  // 表格列配置
  const columns = [
    {
      title: '变更时间',
      dataIndex: 'changeTime',
      width: 150,
    },
    {
      title: '变更人',
      dataIndex: 'changer',
      width: 100,
    },
    {
      title: '字段名称',
      dataIndex: 'fieldName',
      width: 120,
    },
    {
      title: '原值',
      dataIndex: 'oldValue',
      width: 150,
    },
    {
      title: '新值',
      dataIndex: 'newValue',
      width: 150,
    },
    {
      title: '变更说明',
      dataIndex: 'remark',
    },
  ];

  // 数据源
  const dataSource = ref<any[]>([]);

  // 分页配置
  const pagination = ref({
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total) => `共 ${total} 条记录`,
  });

  // 注册表格
  const [registerTable] = useTable({
    columns,
    dataSource: dataSource.value,
    pagination: pagination.value,
    loading: loading.value,
    bordered: true,
    size: 'small',
  });

  // 获取变更日志数据
  async function fetchChangeLogData() {
    if (!props.record || !props.record.id) {
      dataSource.value = [];
      return;
    }

    try {
      loading.value = true;
      const params = {
        productId: props.record.id,
        page: pagination.value.current,
        pageSize: pagination.value.pageSize,
      };

      const result = await getChangeLogList(params); // 调用获取变更日志的API

      dataSource.value = result.records || [];
      pagination.value.total = result.total || 0;
    } catch (error) {
      console.error('获取变更日志失败:', error);
      dataSource.value = [];
      pagination.value.total = 0;
    } finally {
      loading.value = false;
    }
  }

  // 表单提交事件（如果需要保存数据）
  async function handleSubmit() {
    try {
      // 如果这个页面需要保存数据，可以在这里处理
      // 但通常变更日志是只读的，不需要保存
      return { success: true, data: {} };
    } catch (error) {
      emit('error', error);
      return { success: false, error };
    }
  }

  // 设置表单值（用于接收父组件传递的数据）
  function setFormValues(values: any) {
    // 变更日志页面不需要设置表单值
    // 但可以在这里处理传递过来的数据
    if (values) {
      // 可以根据需要处理传入的值
      fetchChangeLogData();
    }
  }

  // 设置更新模式
  function setIsUpdate(value: boolean) {
    // 变更日志页面通常不需要编辑功能
  }

  // 监听记录变化
  watch(
    () => props.record,
    (newRecord) => {
      if (newRecord && newRecord.id) {
        fetchChangeLogData();
      }
    },
    { immediate: true }
  );

  // 监听分页变化
  watch(
    () => pagination.value.current,
    () => {
      fetchChangeLogData();
    }
  );

  // 监听分页大小变化
  watch(
    () => pagination.value.pageSize,
    () => {
      pagination.value.current = 1; // 重置到第一页
      fetchChangeLogData();
    }
  );

  defineExpose({
    handleSubmit,
    setFormValues,
    setIsUpdate,
  });
</script>

<style lang="less" scoped>
  .change-log-container {
    padding: 16px 0;

    :deep(.ant-table) {
      font-size: 12px;
    }

    :deep(.ant-table-thead > tr > th) {
      background-color: #fafafa;
      font-weight: 600;
    }
  }
</style>
